<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
    <script src="vue.js"></script>
</head>

<body>
    <div id="app">
        <div class="calculator">
          <div class="result" style="grid-area: result">
            {{ equation }}
          </div>
          <button style="grid-area: ac" @click="clear">AC</button>
          <button style="grid-area: plus-minus" @click="calculateToggle">±</button>
          <button style="grid-area: percent" @click="calculatePercentage">%</button>
          <button style="grid-area: add" @click="append('+')">+</button>
          <button style="grid-area: subtract" @click="append('-')">-</button>
          <button style="grid-area: multiply" @click="append('×')">×</button>
          <button style="grid-area: divide" @click="append('÷')">÷</button>
          <button style="grid-area: equal" @click="calculate">=</button>     
          <button style="grid-area: number-1" @click="append(1)">1</button>
          <button style="grid-area: number-2" @click="append(2)">2</button>
          <button style="grid-area: number-3" @click="append(3)">3</button>
          <button style="grid-area: number-4" @click="append(4)">4</button>
          <button style="grid-area: number-5" @click="append(5)">5</button>
          <button style="grid-area: number-6" @click="append(6)">6</button>
          <button style="grid-area: number-7" @click="append(7)">7</button>
          <button style="grid-area: number-8" @click="append(8)">8</button>
          <button style="grid-area: number-9" @click="append(9)">9</button>
          <button style="grid-area: number-0" @click="append(0)">0</button>
          <button style="grid-area: dot" @click="append('.')">.</button>
        </div>
      </div>
    <script>
        
new Vue({
  el: '#app',
  data: {
    equation: '0',
    isDecimalAdded: false,
    isOperatorAdded: false,
    isStarted: false,
  },
  methods: {
    isOperator(character) {
      return ['+', '-', '×', '÷'].indexOf(character) > -1
    },
    append(character) {
      // Start
      if (this.equation === '0' && !this.isOperator(character)) {
        if (character === '.') {
          this.equation += '' + character
          this.isDecimalAdded = true
        } else {
          this.equation = '' + character
        }
        
        this.isStarted = true
        return
      }
      

      if (!this.isOperator(character)) {
        if (character === '.' && this.isDecimalAdded) {
          return
        }
        
        if (character === '.') {
          this.isDecimalAdded = true
          this.isOperatorAdded = true
        } else {
          this.isOperatorAdded = false
        }
        
        this.equation += '' + character
      }
      
      
      if (this.isOperator(character) && !this.isOperatorAdded) {
        this.equation += '' + character
        this.isDecimalAdded = false
        this.isOperatorAdded = true
      }
    },
    
    calculate() {
      let result = this.equation.replace(new RegExp('×', 'g'), '*').replace(new RegExp('÷', 'g'), '/')
      
      this.equation = parseFloat(eval(result).toFixed(9)).toString()
      this.isDecimalAdded = false
      this.isOperatorAdded = false
    },
    
    calculateToggle() {
      if (this.isOperatorAdded || !this.isStarted) {
        return
      }
      
      this.equation = this.equation + '* -1'
      this.calculate()
    },
    
    calculatePercentage() {
      if (this.isOperatorAdded || !this.isStarted) {
        return
      }
      
      this.equation = this.equation + '* 0.01'
      this.calculate()
    },
    
    clear() {
      this.equation = '0'
      this.isDecimalAdded = false
      this.isOperatorAdded = false
      this.isStarted = false
    }
  }
})
    </script>
</body>

</html>